<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn :number1='num1' :number2='num2'
			 @num1change='num1change' @num2change='num2change'></cpn>
		</div>
		<template id="cpn">
			<div id="">
				<h2>props:{{number1}}</h2>
				<h2>data:{{dnumber1}}</h2>
				<!-- <input type="text" name="" id="" value="" v-model="dnumber1"/> -->
				<input type="text" name="" id="" :value="dnumber1" @input="num1Input"/>
				<h2>props:{{number2}}</h2>
				<h2>data:{{dnumber2}}</h2>
				<!-- <input type="text" name="" id="" value="" v-model="dnumber2"/> -->
				<input type="text" name="" id="" :value="dnumber2" @input="num2Input"/>
			</div>
		</template>
		<script src="../js/vue.js"></script>
		<script>
			Vue.s
			const app=new Vue({
				el:'#app',
				data:{
					num1:1,
					num2:0
				},
				components:{
					cpn:{
						template:'#cpn',
						props:{
							number1:Number,
							number2:Number
						},
						data(){
							return{
								dnumber1:this.number1,
								dnumber2:this.number2,
								event:{
									
								}
							}
						},
						methods:{
							num1Input(event){
								//1.将input中的value赋值到dnumber1中
								this.dnumber1=event.target.value;
								//2.为了让父组件可以修改值，发出一个事件
								this.$emit('num1change',this.dnumber1);
								//3.同时修改dnumber2的值
								this.dnumber2=this.dnumber1*100;
								this.$emit('num2change',this.dnumber2);
							},
							num2Input(event){
								this.dnumber2=event.target.value;
								this.$emit('num2change',this.dnumber2);
								this.dnumber1=this.dnumber2/100;
								this.$emit('num1change',this.dnumber1);
							}
						}
					}
				},
				methods:{
					num1change(event){
						this.num1=parseFloat(event);
					},
					num2change(event){
						this.num2=parseFloat(event);
					}
				}
			})
		</script>
	</body>
</html>
